import styles from "./index.module.scss";
import { FC } from "react";
import { ServiceO } from "@react-vant/icons";
import LozyLoadImage from "@/components/LozyLoadImage/index";
import { useNavigate } from "react-router-dom";
interface IProps {
  data: songList[];
}
const MusicList: FC<IProps> = ({ data }) => {
  const navigate = useNavigate();
  return (
    <div className={styles.MusicList}>
      <div className={styles.MusicListItemWrap}>
        {data.map((it, index) => {
          return (
            <div
              onClick={() => navigate(`/playlist/${it.id}`)}
              className={styles.MusicListItem}
              key={index}
            >
              <div className={styles.picUrl}>
                <LozyLoadImage src={it.picUrl} alt={"测试"} />
              </div>
              <p className={styles.name}>{it.name}</p>
              <div className={styles.playCount}>
                <ServiceO />
                <span>{it.playCount}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default MusicList;
